<app-loading [condition]="isLoading"></app-loading>

<app-toast [message]="toast.message"></app-toast>

@if (!isLoading) {
  <div class="card">
    <h4 class="card-header">Registered users ({{users.length}})</h4>
    <div class="card-body">
      <table class="table table-bordered">
        <thead class="table-secondary">
          <tr>
            <th scope="col">Username</th>
            <th scope="col">Email</th>
            <th scope="col">Role</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        @if (users.length === 0) {
          <tbody>
            <tr>
              <td colspan="4">There are no registered users.</td>
            </tr>
          </tbody>
        }
        <tbody>
          @for (user of users; track user) {
            <tr>
              <td>{{user.username}}</td>
              <td>{{user.email}}</td>
              <td>{{user.role}}</td>
              <td>
                <button class="btn btn-sm btn-danger" (click)="deleteUser(user)"
                  [disabled]="auth.currentUser._id === user._id">
                  <i class="fa fa-trash"></i> Delete
                </button>
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  </div>
}